<template>
  <!-- wrap -->
  <div class="wrap">
      <!-- content -->
      <div class="content">
          <!-- left -->
          <section id="ileft" class="lfloat cleft">
              <article class="article">
                  <header class="contHeader">
                      <h2>{{article.title}}</h2>
                      <div class="article_tag">
                          <span class="type">{{article.type}}</span>
                          <span class="tag">标签：<a href="#">{{article.tag}}</a></span>
                          <span class="postDate">{{article.postD}}</span>
                          <p class="article_tagR">
                              <i class="read"></i><span class="readN">{{article.readN}}</span>
                              <i class="tuijian"></i><span class="tuijianN">{{article.recommendN}}</span>
                          </p>
                      </div>
                  </header>
                  <div class="article_cont" v-html="article.content">
                      
                  </div>
                  <footer class="article_footer"><span>推荐</span></footer>
              </article>
          </section>
          <!-- left -->
          <!-- right -->
          <section id="iright" class="rfloat">
              <div class="Ritem">
                  <dl class="authorInfo">
                      <dt><a href="#"><img :src="article.userPic" alt="用户头像"></a></dt>
                      <dd>
                          <h4><a href="#">{{article.author}}</a></h4>
                          <p><span>原创<em>22</em></span><span>文章<em>66</em></span></p>
                      </dd>
                  </dl>
              </div>
              <hot/>
          </section>
          <!-- right -->
      </div>
      <!-- content -->
  </div>
  <!-- wrap -->
</template>

<script>
import Vue from 'vue'
import hot from './hot'
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);
export default {
  name: 'tHead',
  data () {
    return {
      articleId:'',
      article:{}
    }
  },
  components:{hot},
  beforeMount(){
    this.article=this.$route.params.articleId;
  },
  mounted(){
    this.getArticle(this.article);
  },
  methods:{
    getArticle:function(rarticleId){
      this.$http.post('http://www.eblog.site/eblog/api/contentGetArticle',
        {contentId:rarticleId}
        ,{emulateJSON: true}
        ).then(function(response){
          this.article=response.body;
        },function(response){

        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
